<template>
  <div>
    <transition name="body">
      <div v-show="showEmoji">
        <span class="emoji-item"
              v-for="(value, key, index) in emojiListURL"
              :key="index"
              @click="addEmoji(key)">
          <img class="emoji" :src="value" :title="key" width="24px" height="24px"/>
        </span>
      </div>
    </transition>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import $constant from "@/utils/constant"
const emits = defineEmits(['addEmoji'])

const props = defineProps({
  showEmoji: {
    type: Boolean
  }
});

const emojiList = ref($constant.emojiList);
const emojiListURL = ref({});


onMounted(() => {
  emojiListURL.value = getEmojiList(emojiList.value);
})

function addEmoji(key) {
  emits("addEmoji", key);
}

function getEmojiList(emojiList) {
  let emojiName;
  let url;
  let result = {}
  for (let i = 0; i < emojiList.length; i++) {
    emojiName = "[" + emojiList[i] + "]";
    let j = i + 1;
    url = $constant.qiniuDownload + "emoji/q" + j + ".gif";
    result[emojiName] = url;
  }
  return result;
}
</script>

<style scoped>

  .emoji-item {
    cursor: pointer;
    display: inline-block;
  }

  .emoji-item:hover {
    transition: all 0.2s;
    border-radius: 0.25rem;
    background: var(--lightGray);
  }

  .emoji {
    margin: 0.25rem;
    /* 把此元素放置在父元素的中部 */
    vertical-align: middle;
  }

  .body-enter-active, .body-leave-active {
    transition: all 0.3s;
  }

  .body-enter, .body-leave-to {
    opacity: 0;
    transform: scale(0.5);
  }
</style>
